<template>
  <div class="login">
    <div class="content">
		<div class="areabox">
			<div class="public">
				<h3>登录优推平台</h3>
				<ul>
					<li><b class="re_01"></b><input name="" v-model="username" type="text" placeholder="请输入邮箱或手机号"/></li>
					<li><b class="re_02"></b><input name="" v-model="password" type="password" placeholder="请输入登录密码"/></li>
					<li class="pecul"><b class="re_06"></b><input name="" v-model="userCode" v-on:input="changeCode(userCode)" type="text" maxlength="4" placeholder="请输入验证码"/>
						<div class="code" @click="createCode">{{code}}</div>
            <p class="codeTxt" v-if="!isTureCode">验证码错误</p>
					</li>
				</ul>
				<a href="javascript:;" class="btn_org" @click="login()">立即登录</a>
				<div class="extra">
					<!-- <a href="javascript:;" @click="forgetPsw"></a> -->
          <router-link :to="{path:'/resetpsw',query:{type:1}}">忘记密码？</router-link>
					<router-link :to="{path:'/register',query:{type:1}}">注册新帐号</router-link>
				</div>
			</div>
		</div>
	</div>
  </div>
</template>
<script>
import commonJs from "@/common/js/common";
export default {
  name: "login",
  data() {
    return {
      username: "",
      password: "",
      userCode: "",
      code: "",
      isTureCode: true
    };
  },
  mounted() {
    this.createCode();
  },
  methods: {
    createCode() {
      this.code = "";
      let codeLenth = 4;
      const random = new Array(
        0,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z"
      ); //随机数
      for (let i = 0; i < codeLenth; i++) {
        let index = Math.floor(Math.random() * 36);
        this.code += random[index];
      }
    },
    forgetPsw() {},
    changeCode(userCode) {
      this.isTureCode = this.code == userCode.toUpperCase();
    },
    login() {
      if (!this.userCode || !this.isTureCode) {
        this.$message({
          type: "warning",
          message: "您的信息填写有误！"
        });
        return;
      }
      this.$http({
        method: "POST",
        url: commonJs.BASE_URL + "/login.do",
        data: `username=${this.username}&password=${this.password}`
      })
        .then(res => {
          if (res.data.code == 0) {
            localStorage.clear();
            let token = res.data.data.token;
            let devId = res.data.data.id;
            let companyName = res.data.data.companyName;
            localStorage.setItem("token", token);
            localStorage.setItem("devId", devId);
            localStorage.setItem("companyName", companyName);
            this.$message({
              type: "success",
              message: res.data.message
            });
            this.$router.push({ path: "/rootData", query: { type: 1 } });
          } else {
            this.$message({
              type: "warning",
              message: res.data.message
            });
          }
        })
        .catch(error => {
          this.$message({
            type: "warning",
            message: "网络错误，请稍后再试！"
          });
        });
    }
  }
};
</script>
<style scoped>
.login {
  margin: 10% 0;
}
.code {
  background: lightgray;
  font-size: 25px;
  text-align: center;
  color: #fa8b00;
  cursor: pointer;
}
.codeTxt {
  color: red;
  position: relative;
  left: 340px;
  top: 25px;
}
</style>
